<template>
  <div class="wrapper">
    <el-row :gutter="10">
      <el-col :span="24" :xl="24" :xs="20">
        <div class="grid-content bg-purple-dark">
          <template>
            <el-table
              border
              @select-all="clickcell"
              :data="this.$store.state.goodlist"
              style=" width: 100% "
            >
              <el-table-column width="60" type="selection">
                <template slot-scope="scope">
                  <input type="checkbox" v-model="scope.row.checked" />
                </template>
              </el-table-column>
              <el-table-column prop="_id" label="id" width="180">
              </el-table-column>
              <el-table-column prop="title" label="商品名"> </el-table-column>
              <el-table-column prop="num" label="数量">
                <template slot-scope="scope">
                  <el-button type="danger" @click="jian(scope.row._id)"
                    >-</el-button
                  >
                  <el-input
                    type="text"
                    v-model="scope.row.num"
                    style="width: 50px"
                  />
                  <el-button type="success" @click="jia(scope.row._id)"
                    >+</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="" label="图片">
                <template slot-scope="scope">
                  <el-image :src="scope.row.pic" style="width: 60px"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格"> </el-table-column>
              <el-table-column prop="" label="小计">
                <template slot-scope="scope">
                  {{ scope.row.price * scope.row.num }}
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" @click="del(scope.row._id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <br />
    <el-button @click="all()">全选</el-button>
    <el-button @click="noall()">全不选</el-button>
    <el-button @click="duodel()" type="danger">多选删除</el-button>
    <el-button @click="sort()">从小到大</el-button>
    &nbsp;
    <el-input
      placeholder="最低价格"
      style="width: 100px"
      v-model="down"
    ></el-input
    >-
    <el-input
      placeholder="最高价格"
      style="width: 100px"
      v-model="top"
      @blur="getshops"
    ></el-input>
    &nbsp;
    <el-button @click="sou">搜索</el-button>

    <p>总价:{{ sum }}</p>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      down: "",
      top: "",
    };
  },
  computed: {
    sum() {
      return this.$store.getters.sum;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getshops();
  },
  methods: {
    //   获取数据
    getshops() {
      this.$axios("./shop.json").then((res) => {
        this.$store.commit("goodlist", res.result);
      });
    },
    // 删除
    del(id) {
      this.$store.commit("del", id);
    },
    // 加
    jia(num) {
      this.$store.commit("jia", num);
    },
    // 减
    jian(num) {
      this.$store.commit("jian", num);
    },
    // 全选
    all() {
      this.$store.commit("all", true);
    },
    // 全不选
    noall() {
      this.$store.commit("all", false);
    },
    // 多选删除
    duodel() {
      this.$store.commit("duodel");
    },
    clickcell() {
      let a = true;
      this.$store.commit("all", a);
    },
    // 搜索
    sou() {
      this.$store.commit("sou", [this.down, this.top]);
    },
    // 从小到大
    sort(){
      this.$store.commit("sort")
    }
  },
};
</script>

<style lang='scss' scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.wrapper {
  padding: 10px 60px 60px 60px;
}
</style>
